<template>
    <cl-crud :ref="setRefs('crud')" @load="onLoad">
        <el-row type="flex" align="middle">
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </el-row>

        <el-row>
            <!-- 数据表格 -->
            <cl-table :ref="setRefs('table')" v-bind="table" >
				<template #column-image="{ scope }">
					<cl-image :src="scope.row.image" />
				</template>
                <template #column-time="{ scope }">
                    <div>
                        <p>
                            {{ scope.row.startTime }}
                        </p>
                        <p>
                            {{ scope.row.endTime }}
                        </p>
                    </div>
                </template>
            </cl-table>
        </el-row>

        <el-row type="flex">
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </el-row>

        <!-- 新增、编辑 -->
        <cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
    </cl-crud>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useCool } from "/@/core";

export default defineComponent({
    setup() {
        // 功能
        const { refs, setRefs, service } = useCool();

        // 新增、编辑配置
        const upsert = reactive<Upsert>({
            items: [
                {
					label: "名称",
					prop: "name",
					component: {
						name: "el-input",
						props: {
							clearable: true
						},
						attrs: {
							placeholder: "请输入标题"
						}
					},
					rules: {
						required: true,
						message: "标题不能为空"
					}
				},
                {
					label: "封面",
					prop: "image",
					component: {
						name: "cl-upload",
					},
					rules: {
						required: true,
						message: "封面图不能为空"
					}
				},
                {
					label: "活动时间",
					prop: "_date",
					value: [],
					hook: "datetimerange",
					component: {
						name: "el-date-picker",
						props: {
							type: "datetimerange",
							valueFormat: "YYYY-MM-DD HH:mm:ss"
						}
					},
					rules: {
						required: true,
						message: "活动时间不能为空"
					}
				},
				{
					label: "活动状态",
					prop: "status",
					value: 0,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "关闭",
								value: 0
							},
							{
								label: "开启",
								value: 1
							}
						]
					}
				},
				{
					label: "活动内容",
					prop: "content",
					component: {
						name: "cl-editor-quill",
                        props: {
							height: 400
						}
					}
				}
            ]
        });

        // 表格配置
        const table = reactive<Table>({
            props: {
				"default-sort": {
					prop: "createTime",
					order: "descending"
				}
			},

            columns: [
                {
					type: "selection",
					width: 60
				},
				{
					label: "ID",
					prop: "id",
					minWidth: 80
				},
				{
					label: "封面",
					prop: "image",
					minWidth: 100
				},
				{
					label: "活动名称",
					prop: "name",
					minWidth: 160,
					showOverflowTooltip: true
				},
                {
					label: "状态",
					prop: "status",
					dict: [
						{
							label: "启用",
							value: 1,
							type: "success"
						},
						{
							label: "关闭",
							value: 0,
							type: "danger"
						}
					],
					minWidth: 100
				},
                {
					label: "有效期",
					prop: "time",
					minWidth: 120
				},
				{
					label: "创建时间",
					prop: "createTime",
					sortable: "custom",
					minWidth: 150
				},
				{
					label: "操作",
					type: "op",
                    buttons: ["edit", "delete"]
				}
            ]
        });

        // crud 加载
        function onLoad({ ctx, app }: CrudLoad) {
            console.log(service);
            
            // 绑定 service
            ctx.service(service.weibo.activity).done();
            app.refresh();
        }

        return {
            refs,
            setRefs,
            upsert,
            table,
            onLoad
        };
    }
});
</script>
